<template>
  <div id="app">
    <!--  头部  -->
    <div class="header">
      <div class="bg_header">
        <div class="header_nav fl t_title">
          云容器网络监控管理系统
        </div>
      </div>
    </div>
    <div class="data_content">
      <div class="data_main">
        <div class="main_left fl">

          <div class="left" style="height: 520px;margin-right: 50px">
            <!--左上边框-->
            <div class="t_line_box">
              <i class="t_l_line"></i>
              <i class="l_t_line"></i>
            </div>
            <!--右上边框-->
            <div class="t_line_box">
              <i class="t_r_line"></i>
              <i class="r_t_line"></i>
            </div>
            <!--左下边框-->
            <div class="t_line_box">
              <i class="l_b_line"></i>
              <i class="b_l_line"></i>
            </div>
            <!--右下边框-->
            <div class="t_line_box">
              <i class="r_b_line"></i>
              <i class="b_r_line"></i>
            </div>
            <div class="main_title">
              网络拓扑图
            </div>
            <topology v-on:GetNode="getnode"></topology>
          </div>

          <div class="left_2" style="height: 290px;margin-right: 50px">
            <!--左上边框-->
            <div class="t_line_box">
              <i class="t_l_line"></i>
              <i class="l_t_line"></i>
            </div>
            <!--右上边框-->
            <div class="t_line_box">
              <i class="t_r_line"></i>
              <i class="r_t_line"></i>
            </div>
            <!--左下边框-->
            <div class="t_line_box">
              <i class="l_b_line"></i>
              <i class="b_l_line"></i>
            </div>
            <!--右下边框-->
            <div class="t_line_box">
              <i class="r_b_line"></i>
              <i class="b_r_line"></i>
            </div>
            <div class="main_title">
              docker数据
            </div>
            <div class="dockermsg">
              <radar></radar>
              <iprank></iprank>
            </div>

          </div>
        </div>

        <div class="main_right fr">
          <div class="right" style="height: 460px;margin-left: 5px">
            <!--左上边框-->
            <div class="t_line_box">
              <i class="t_l_line"></i>
              <i class="l_t_line"></i>
            </div>
            <!--右上边框-->
            <div class="t_line_box">
              <i class="t_r_line"></i>
              <i class="r_t_line"></i>
            </div>
            <!--左下边框-->
            <div class="t_line_box">
              <i class="l_b_line"></i>
              <i class="b_l_line"></i>
            </div>
            <!--右下边框-->
            <div class="t_line_box">
              <i class="r_b_line"></i>
              <i class="b_r_line"></i>
            </div>
            <div class="main_title">
              docker信息
            </div>
            <chooseprotocol class="up" v-bind:host="host" v-bind:docker="docker"></chooseprotocol>
            <div class="mid">
              <cpudata class="mid-left" v-bind:host="host" v-bind:docker="docker"></cpudata>
              <dockerdata class="mid-right" v-bind:host="host" v-bind:docker="docker"></dockerdata>
            </div>


          </div>

          <div class="down">
            <iplist v-bind:host="host" v-bind:docker="docker"></iplist>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
<script>

import Topology from "@/components/topology";
import Chooseprotocol from "@/components/chooseprotocol";
import Cpudata from "@/components/cpudata";
import Dockerdata from "@/components/dockerdata";
import Iplist from "@/components/iplist";
import Radar from "@/components/radar";
import Iprank from "@/components/iprank";
export default {
  components: {Iprank, Radar, Iplist, Dockerdata, Cpudata, Chooseprotocol, Topology},
  data() {
    return {
      host: null,
      docker: null,
      dockerid: null
    }
  },
  methods: {
    getnode(val) {
      // console.log(val["data"]["name"].split('/')[1])
      var str = val["data"]["value"].split('/');
      console.log(val["data"]["value"]);
      this.host=str[0];
      this.docker=str[1];
      this.dockerid=val["data"]["name"].split('/')[1]
      // console.log(this.host)
      // console.log(this.docker)
    }
  }
}
</script>
<style scoped>
#app {

}

.up {
  height: 250px;
  margin-top: 4px;
  margin-left: 4px;
}

.mid {
  height: 220px;
  display: flex;
  flex-direction: row;
}

.down {
  margin-top: 30px;
  margin-left: 20px;
}

.dockermsg {
  display: flex;
  flex-direction: row;
}




.data_content .data_bottom div .table-scroll {
  /* width: calc(100% - 5px); */
  width: 100%;
  margin-top: 25px;
  /* overflow-x: scroll; */
  /* 滚动 */
  white-space: nowrap;
  position: relative;
  /* z-index: 100; */
  /* cursor: pointer; */
}

.table-scroll table {
  /* table-layout: fixed; */
  /* width: calc(100%); */
  /* background-color:darkseagreen ; */
  width: 100%;
  /* margin-top: 25px; */
}

.table-scroll thead, tbody tr {
  height: 42px;
  display: table;
  width: 100%;
  table-layout: fixed;
}

.table-scroll thead {
  width: calc(100% - 1em);
  height: 42px;
}

.table-scroll th {
  font-size: 12px;
  font-weight: 600;
  color: #61d2f7;
  text-align: center;
}

.table-scroll td {
  color: #fff;
  font-size: 10px;
  text-align: center;
}

.table-scroll tbody {
  overflow-y: scroll;
  /* overflow-x: scroll; */
  display: block;
  width: 100%;
  /* height: calc(100vh - 300px); */
  height: 200px;
}

.table-scroll tbody tr:nth-child(1),
.table-scroll tbody tr:nth-child(3),
.table-scroll tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
  background-color: #072951;
  box-shadow: -10px 0px 15px #2C58A6 inset, /*左边阴影*/ 10px 0px 15px #2C58A6 inset; /*右边阴影*/
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: #6e92d1;
  background-color: #304b69
}

select {
  width: 5em;
  height: 2em;
  padding: 0.2em 0.4em 0.2em 0.4em;
  vertical-align: middle;
  border: 0.2px solid #6e92d1;
  -moz-border-radius: 0.2em;
  -webkit-border-radius: 0.2em;
  border-radius: 0.2em;
  /* -webkit-appearance       : none;
  -moz-appearance          : none;
  appearance               : none; */
  background: #304b69;
  font-family: SimHei;
  font-size: 1em;
  color: RGBA(255, 255, 255, 0.7);
  cursor: pointer;
}

</style>
